<template>
    <div class="navbar">
        <van-nav-bar
        :title="this.title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"

  >
  <template #right>
           <div class="navRight" v-if="$route.path==='/detail'">
                <van-icon name="service-o" size="18" @click="$router.push('/help')" />
                <van-icon name="star-o" size="18" :style="{paddingLeft:'15px'}" ref="star" @click="handleCollection" />
                <van-cell icon="arrow-left" @click="showShare = true" />
                <van-share-sheet
                v-model="showShare"
                :options="options"
                  @select="onSelect"
                />

                <!-- <van-icon name="arrow-left" size="18"  /> -->
           </div>
           <van-icon v-else name="search" size="18" />
        </template>
        </van-nav-bar>
    </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'Navbar',

  data () {
    return {
      title: '',
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],

    }
  },
  created () {
    this.title = this.$route.meta.title
  },

  mounted () {

  },

  methods: {
    // 点击左侧按钮返回
    onClickLeft () {
      this.$router.back()
    },
    // 点击星星添加收藏
    handleCollection () {
      if (this.$refs.star.style.color === '') {
        this.$refs.star.style.color = 'red'
        Toast('收藏成功')
      } else {
        this.$refs.star.style.color = ''
        Toast('取消收藏')
      }
    },
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    },
  },
}
</script>

<style lang="less" scoped>
.navRight{
    display: flex;
    align-items: center;
}
</style>
